<template>
  <div>
    <view class='container'>
      <!--创建两个Canvas  -->
      <canvas class='bgCanvas' canvas-id='bgCanvas'></canvas>
      <view class='stepText'>{{stepText}}<span>s</span></view>
    </view>
    <div class="time-tips">计时结束后，将恢复计费</div>
    <!--
    <div>
      <dl class="flex1 topflex">
        <dt class="daojs">
          <div class="box">
            <div class="left_box">
              <div class="left_item"></div>
            </div>
            <div class="right_box">
              <div class="right_item"></div>
            </div>
            <div class="mask">
              <text>{{countNum}}</text>
              s
            </div>
          </div>
        </dt>
        <dt class="tip1">计时结束后，将恢复计费</dt>
      </dl>
    </div>
    -->
    <div class="line topline"></div>
    <div class="view">
      <div style="text-align: center">
        <h1>￥{{orderInfo.amount}}</h1>
        <text class="tip1 t1">预计支付</text>
      </div>
      <div v-if="orderInfo.free != '1'">
        <div v-for="(item,index) in riding"
             :class="index == 0 ? 'flex1 gray-font':'flex1 green-font left24'"
             :key="index">
          <div v-if="index == 0" :style="'color:'+item.color"><img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_qixing.png"
                                                                   class="imgqx"/> {{item.left}}
          </div>
          <text :style="'color:'+item.color" v-else>{{item.left}}</text>
          <text :style="'color:'+item.color">{{item.right}}</text>
        </div>
        <div class="line" style="margin-top: 40rpx"></div>
        <div class="flex1 gray-font otherpay" v-for="(item,index) in insure" :key="index">
          <div :style="'color:'+item.color"><img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_bx.png" class="imgbx"/> {{item.left}}
          </div>
          <text :style="'color:'+item.color">{{item.right}}</text>
        </div>
        <div class="line"></div>
        <div class="flex1 red-font otherpay"
             v-if="orderInfo.isDispatch == 1"
             v-for="(item,index) in dispatch"
             :key="index">
          <div :style="'color:'+item.color"><img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_chase.png" class="imgddf"/> {{item.left}}
          </div>
          <text :style="'color:'+item.color">{{item.right}}</text>
        </div>
        <div class="line" v-if="dispatch.length > 0"></div>
      </div>
      <div class="dialog_footer">
        <button class="leftbtn" @click="back()">继续骑行</button>
        <button class="rightbtn" @click="returnBike">确认还车</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {
    data() {
      return {
        countNum: 9,
        isPass: true,
        count: null,
        orderInfo: {},
        riding: [],
        insure: [],
        dispatch: [],
        stepText: 10,
        valHandle: null,
        returnIng: false
      }
    },
    onUnload() {
      clearInterval(this.valHandle)
    },
    onLoad(options) {
      this.orderInfo = JSON.parse(options.orderInfo)
      if (this.orderInfo.feeDetailMap) {
        this.riding = this.orderInfo.feeDetailMap.first
        this.insure = this.orderInfo.feeDetailMap.second
        this.dispatch = this.orderInfo.feeDetailMap.third
      }
    },
    onShow() {
//      this.countNum = 10
//      let _this = this
//      this.count = setInterval(() => {
//        if (this.countNum == 0) {
//          clearInterval(_this.count)
//          _this.back()
//        } else {
//          this.countNum--
//        }
//      }, 1000)

      const ctx = wx.createCanvasContext("bgCanvas")

      ctx.setLineWidth(3)
      ctx.arc(35, 35, 32, 0, 2 * Math.PI)
      ctx.setStrokeStyle('white')
      ctx.stroke()

      ctx.beginPath()
      ctx.setLineCap('round')
      ctx.setLineWidth(3)
      ctx.arc(35, 35, 32, 1.5 * Math.PI, -0.5*Math.PI, true)
      ctx.setStrokeStyle('#333333')
      ctx.stroke()
      ctx.draw()
      var that = this
      that.stepText = 10 //重新设置一遍初始值，防止初始值被改变
      var step = that.stepText ;  //定义倒计时
      var num = -0.5;
      var decNum = 2/step/10
      clearInterval(this.valHandle)

      function drawArc(endAngle) {
        ctx.setLineWidth(3)
        ctx.arc(35, 35, 32, 0, 2 * Math.PI)
        ctx.setStrokeStyle('white')
        ctx.stroke()

        ctx.beginPath()
        ctx.setLineCap('round')
        ctx.setLineWidth(3)
        ctx.arc(35, 35, 32, 1.5 * Math.PI, endAngle, true)
        ctx.setStrokeStyle('#333333')
        ctx.stroke()
        ctx.draw()
      }

      that.valHandle = setInterval(function(){

        that.stepText = parseInt(step)
        step = (step - 0.1).toFixed(1)

        num += decNum
        drawArc(num*Math.PI)

        if(step<=0){
          clearInterval(that.valHandle)  //销毁定时器
         that.back()
        }

      },100)
    },
    methods: {
      getCostDetail() {
        let data = {
          orderNo: this.orderInfo.orderNo
        }
        Service.getCostDetail(data).then((res) => {
          if (res.code == 200) {
            let data = res.data
            data.orderNo = this.orderInfo.orderNo
            let travelInfo = JSON.stringify(data)
            setTimeout(() => {
              wx.reLaunch({
                url: '../waitPay/main?travelInfo=' + travelInfo
              })
            },200)
          } else if (res.code == 300) {
            setTimeout(() => {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + this.orderInfo.orderNo
              })
            },200)
          }
        })
      },
      returnBike() {
        let that = this
        if(this.returnIng){
          return
        }
        this.returnIng = true
        setTimeout(() => {
          that.returnIng = false
        },2000)
        let data = {
          orderNo: this.orderInfo.orderNo
        }
        Service.returnBike(data).then((res) => {
          switch (res.code) {
            case 200:
              this.getCostDetail()
              break
            case 400: //订单已经还车未结算跳转支付页面
              this.getCostDetail()
              break
            case 401: //订单已经取消跳转首页
              setTimeout(() => {
                wx.reLaunch({
                  url: '../index/main'
                })
              },2000)
              break
            case 403: //未使用车辆，订单已取消
              setTimeout(() => {
                wx.reLaunch({
                  url: '../index/main'
                })
              },2000)
              break
            case 405: //订单费用为0，跳转支付完成页面
              setTimeout(() => {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + this.orderInfo.orderNo
              })
              },2000)
              break
          }
        })
      },
      back() {
        wx.navigateBack({ changed: true })
      }
    }
  }
</script>

<style scoped>
  .container{
    width:100%;
    height:140px;
    margin-top: 80px;
    justify-content:center;
    position: relative;
  }
  .bgCanvas{
    width:150px;
    height:150px;
    margin: 0 auto;

  }
  .stepText{
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -70px;
    width:140px;
    height:140px;
    line-height: 140px;
    font-size: 46px;
    color: #333;
    text-align: center;
  }
  .stepText span{
    margin-left: 8px;
    font-size: 26px;
    color: #666;
  }
  .time-tips{
    padding-top: 26px;
    font-size:28px;
    color: #999999;
    text-align: center;
  }
  .view {
    padding: 50px 50px 0 50px;
    text-align: center;
  }

  .img3 {
    width: 176px;
    height: 152px;
    margin-top: 253px;
    margin-bottom: 36px;
  }

  h1 {
    line-height: 100px;
    font-size: 72px;
    margin-bottom: 0;
  }

  .flex1 {
    justify-content: space-between;
    font-size: 30px;
    font-family: PingFangSC-Regular;
    color: rgba(102, 102, 102, 1);
    line-height: 42px;
  }

  .flex1 text {
    line-height: 55px;
  }

  .gray-font {
    color: #666;
  }

  .green-font {
    color: #2C9D23;
  }

  .gray001-font {
    color: #ddd;
  }

  .red-font {
    color: #FF5E5E;
  }

  .otherpay text {
    line-height: 120px;
  }

  .dialog_footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 50px;
  }

  .imgbx, .imgqx {
    width: 24px;
    height: 28px;
  }

  .imgddf {
    width: 24px;
    height: 24px;
  }

  .left24 {
    margin-left: 30px;
  }

  .t1 {
    font-size: 24px;
    color: #999;
  }

  .topflex {
    flex-direction: column;
  }

  .daojs {
    margin-top: 70px;
    margin-bottom: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 140px;
  }

  .topline {
    background: #eee;
    margin-top: 70px;
    margin-bottom: 30px
  }

  .box{
    /* 最外层的盒子 */
    width:140px;
    height:140px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background-color: #333;
    display: flex;
    justify-content: start;
    align-items: center;
  }
  .left_box,.right_box{
    /*
      左右两边用于 隐藏 旋转的div的盒子
      通过overflow来隐藏内部div旋转出去的部分
    */
    position: absolute;
    top: 0;
    width:50%;
    height:140px;
    overflow: hidden;
    z-index: 1;
  }
  .left_box{
    left: 0rpx;
  }
  .right_box{
    right: 0rpx;
  }
  .left_item,.right_item{
    /*
     这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条)
     为了方便理解，下面用deeppink和cyan分别设置了左右两边div的颜色
    */
    width: 100%;
    height: 140px;
  }
  .left_item{
    /*
     1.设置圆角，圆角大小为高度的一半
     2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点
     */
    border-top-left-radius: 70px;
    border-bottom-left-radius: 70px;
    -webkit-transform-origin: right center;
    -webkit-animation: loading_left 10s forwards linear;
    background-color: #ddd;
    overflow: hidden;
  }
  .right_item{
    border-top-right-radius: 70px;
    border-bottom-right-radius: 70px;
    -webkit-transform-origin: left center;
    -webkit-animation: loading_right 10s forwards linear;
    background-color: #ddd;
    overflow: hidden;
  }
  .mask{
    /* 遮住div多余的部分，呈现出线条的效果 */
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    border-radius: 50%;
    background-color: #fff;

  }
  .mask text{
    font-size: 46px;
    color: #333;
    text-align: center;
    line-height: 126px
  }
  @-webkit-keyframes loading_left{
    0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100%{
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  @keyframes loading_right{
    0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50%{
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    100%{
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }



</style>
